import { JSX } from "preact/jsx-runtime";
import { computed } from "@preact/signals";
import china from "~/components/icons/china.tsx";
interface MetaProps extends Omit<JSX.HTMLAttributes<HTMLLIElement>, "icon"> {
  icon: JSX.Element;
  link: string | JSX.HTMLAttributes<HTMLAnchorElement>;
}
function MetaInfo(props: MetaProps) {
  const { link, icon, class: OC, className, ...ops } = props;
  return (
    <li class={`flex items-center ${OC ?? ""} ${className ?? ""}`} {...ops}>
      {icon}
      {typeof link === "string" ? link : <a {...link} />}
    </li>
  );
}
export interface ReviewContentProps {
  userAvatar?: string | JSX.HTMLAttributes<HTMLImageElement>;
  userName: string;
  metas: JSX.Element | MetaProps[];
  subject: string;
  updateTime?: string;
  averageScore?: string;
  description: string[] | string;
}
/**
 * 审核评论
 */
export default (props: ReviewContentProps) => {
  const Avatar = computed(() => {
    const { userAvatar: avatar = "/profile-picture-5.jpg" } = props;
    if (typeof avatar === "string") {
      return (
        <img
          class="w-10 h-10 rounded-full"
          src={avatar || "/profile-picture-5.jpg"}
          alt="avatar image"
        />
      );
    }
    const { class: OC, className, src, ...ops } = avatar;
    if (!src) {
      Object.assign(ops, {
        src: "/profile-picture-5.jpg",
      });
    }
    return (
      <img
        className={`w-10 h-10 rounded-full ${OC ?? ""} ${className ?? ""}`}
        {...ops}
      />
    );
  });
  return (
    <article class=" gap-8 xs:gap-0 sm:gap-0 grid grid-cols-3 xs:grid-cols-1 sm:grid-cols-1 max-w-5xl mx-auto">
      <div>
        {/* 用户信息 */}
        <div class="flex items-center mb-6">
          {Avatar}
          <div class="ms-4 font-medium dark:text-white">
            <p>{props.userName}</p>
            <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
              {china}
              China
            </div>
          </div>
        </div>
        {/* 评论元信息 */}
        {Array.isArray(props.metas)
          ? (
            <ul class="space-y-4 text-sm text-gray-500 dark:text-gray-400">
              {props.metas.map((i) => <MetaInfo {...i} />)}
            </ul>
          )
          : props.metas}
      </div>
      <div class="col-span-2 xs:mt-6 sm:mt-6 mt-0">
        <div class="flex items-start mb-5">
          <div class="pe-4">
            {props.subject
              ? (
                <footer>
                  <p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
                    最近更新:{" "}
                    <time datetime="2022-01-20 19:00">
                      {props.updateTime}
                    </time>
                  </p>
                </footer>
              )
              : null}
            <h4 class="text-xl font-bold text-gray-900 dark:text-white ">
              <span>{props.subject}</span>
              {props.averageScore
                ? (
                  <span class="ms-2 bg-blue-700 text-white text-sm font-semibold inline-flex items-center p-1.5 rounded">
                    {props.averageScore}
                  </span>
                )
                : null}
            </h4>
          </div>
        </div>
        {Array.isArray(props.description)
          ? props.description.map((item, index) => {
            return (
              <p
                class={`${
                  !index ? "mb-2" : "mb-5"
                } text-gray-500 dark:text-gray-400`}
              >
                {item}
              </p>
            );
          })
          : (
            <p class="mb-2 text-gray-500 dark:text-gray-400">
              {props.description}
            </p>
          )}

        <aside class="flex items-center mt-3">
          <a
            href="#"
            class="inline-flex items-center text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
          >
            <svg
              class="w-3.5 h-3.5 me-2.5"
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="currentColor"
              viewBox="0 0 18 18"
            >
              <path d="M3 7H1a1 1 0 0 0-1 1v8a2 2 0 0 0 4 0V8a1 1 0 0 0-1-1Zm12.954 0H12l1.558-4.5a1.778 1.778 0 0 0-3.331-1.06A24.859 24.859 0 0 1 6 6.8v9.586h.114C8.223 16.969 11.015 18 13.6 18c1.4 0 1.592-.526 1.88-1.317l2.354-7A2 2 0 0 0 15.954 7Z" />
            </svg>
            nice
          </a>
          <a
            href="#"
            class="inline-flex items-center text-sm font-medium text-blue-600 hover:underline dark:text-blue-500 group ms-5"
          >
            <svg
              class="w-3.5 h-3.5 me-2.5"
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="currentColor"
              viewBox="0 0 18 18"
            >
              <path d="M11.955 2.117h-.114C9.732 1.535 6.941.5 4.356.5c-1.4 0-1.592.526-1.879 1.316l-2.355 7A2 2 0 0 0 2 11.5h3.956L4.4 16a1.779 1.779 0 0 0 3.332 1.061 24.8 24.8 0 0 1 4.226-5.36l-.003-9.584ZM15 11h2a1 1 0 0 0 1-1V2a2 2 0 1 0-4 0v8a1 1 0 0 0 1 1Z" />
            </svg>
            bad
          </a>
        </aside>
      </div>
    </article>
  );
};
